<template>
  <div>
    <el-container>
      <el-header style="text-align: center; font-size: 12px; margin-top: 10px">
        <el-row>
          <el-col :span="2" style="text-align: center">
            <el-avatar size="large" :src="require('../../assets/logo.png')"></el-avatar>
          </el-col>
          <el-col :span="3" style="text-align: left">
            <el-tag>{{ userName }}</el-tag>
          </el-col>

          <el-col :span="8" :offset="11" style="text-align: right">
            <el-button type="primary" plain @click="back()">Back</el-button>
            <el-button type="primary" plain @click="exitLogin()">Exit</el-button>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
    <el-table
        :data="tableData">
      <el-table-column
          prop="title"
          label="Title"
          width="150"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="publisher"
          label="Publisher"
          width="120"
          header-align="center">
      </el-table-column>
      <el-table-column
          prop="writer"
          label="Writer"
          width="120"
          header-align="center">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form>
            <el-form-item label="">
              <span>{{ props.row.content }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          :formatter="hideTooLongContent"
          prop="content"
          label="Content"
          header-align="center"
      >
        <!--        <p>Expand to see details</p>-->
      </el-table-column>

      <el-table-column
          prop="date"
          label="Date"
          width="120"
          header-align="center">
      </el-table-column>
      <el-table-column
          prop="category"
          label="Category"
          width="120"
          header-align="center">
<!--        <template slot-scope="props">-->
<!--          <el-button type="text" size="small" @click="edit(props.row)">Edit</el-button>-->
<!--          <el-button type="text" size="small" @click="deleteItem(props.row)">Delete</el-button>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
          prop="link"
          label="Link"
          width="120"
          header-align="center">
      </el-table-column>
    </el-table>
    <el-row type="flx" justify="center" style="margin-top: 15px">
<!--      <el-col :span="6" style="text-align: left">-->
<!--        <el-button @click="addNews()">Add</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="page(pageNum)"
            :current-page.sync="pageNum"
            ref="pagination">
        </el-pagination>
<!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import {mapMutations} from "vuex";

export default {
  name: "News",
  components: {},
  data() {
    return {
      pageSize: 0,
      total: 0,
      tableData: null,
      pageNum: 0
    }
  }
  ,
  methods: {
    //引入vuex
    ...mapMutations(['setPageNum', 'delPageNum','delToken', 'setUserName', 'delUserName']),
    page(currentPage) {
      const _this = this;
      this.currentPage = currentPage;
      _this.$axios({
        methods: 'get',
        url: 'http://cube.yifan.press:2086/news/search/'+this.$route.query.key+'/'+(currentPage-1)
      }).then(function (resp){
        _this.tableData = resp.data.content;
        _this.pageSize = resp.data.size;
        _this.total = resp.data.totalElements;
      })
    },
    //隐藏表格中过长内容
    hideTooLongContent(row, column, cellValue) {
      if (!cellValue) return "";
      if (cellValue.length > 100) {
        return cellValue.slice(0, 100) + '...';
      }
      return cellValue;
    },
    addNews() {
      const vm = this;
      vm.$router.push('/admin/news/update');
    },
    deleteItem(row) {
      const vm = this;
      axios.delete('http://cube.yifan.press:2086/news/deleteByid/' + row.id).then(function (resp) {
        vm.$alert(row.title, "Deleted!", {
          confirmButtonText: 'OK',
          callback: action => {
            window.location.reload()
          }
        });
      })
    },
    edit(row) {
      const vm = this;
      // console.log(this.currentPage);
      vm.setPageNum({pageNum: this.currentPage})
      this.$router.push({
        path: '/admin/news/update',
        query: {
          id: row.id,
        },
      });
    },
    back() {
      const vm = this;
      vm.$router.push('/');
    },
    exitLogin() {
      const _this = this;
      _this.delToken({token: ''});
      _this.delUserName({userName:''});
      _this.$router.push('/login')
    }
  }
  ,
  created() {
    const _this = this;
    _this.$axios({
      methods: 'get',
      url: 'http://cube.yifan.press:2086/news/search/'+this.$route.query.key+'/0'
    }).then(function (resp){
      _this.tableData = resp.data.content;
      _this.pageSize = resp.data.size;
      _this.total = resp.data.totalElements;
    })
    let userName = localStorage.getItem('userName')
    this.userName = userName;
  },
  mounted() {
    //完成编辑后返回项目所在页码
    let pageNum = localStorage.getItem('pageNum');//获取本地存储的页码
    if (pageNum === null || pageNum === '' || pageNum === 'undefined') {//为空则显示第一页
      // console.log('pageNum = 0')
      this.pageNum = 0
    } else {
      console.log(pageNum);
      this.pageNum = pageNum-0;
      this.page(pageNum)
      this.delPageNum({pageNum: ''});
    }

  },
}
</script>

<style scoped>

</style>